<script lang="ts" setup>
//分类页
import Aside from "@/components/Black/Aside.vue";
import Hero from "@/components/Index/Hero.vue";
import LatestNewsThree from "@/components/Index/Latest-News-Three.vue";

import { ref, watchEffect, watch, onMounted } from "vue";
import { useRoute } from "vue-router";

import useGetData from "@/store/get";
import { IndexShowData } from "@/api/interface";
import { ElMessage } from "element-plus";
const open = () => {
  ElMessage({
    message: "抱歉，功能开发中,暂不可用",
    type: "warning",
  });
};

//实例化路由
const route = useRoute();

// 实例化 store
const store = useGetData();

//存储当前拿到的文章数据
const childData = ref();

//存储当前分类信息
const catData = ref();

//特色文章数据
const heroData = ref<IndexShowData[] | never[]>([]);
//其他分类文章
const catPostData = ref<IndexShowData[] | never[]>([]);

onMounted(async () => {
  //拿到当前分类ID
  const id = Number(route.params.id);
  //拿到分类信息
  const catTitle = await store.getCatData(id);
  catData.value = catTitle[0];
  //获得分类下的文章信息
  childData.value = await store.apiGetCatDataShow(id, 10);
});
//监听数据变化
watch(childData, (newVal) => {
  if (typeof newVal !== "undefined") {
    heroData.value = newVal.slice(0, 1);
    catPostData.value = newVal.slice(1, 10);
    //catPostData.value = newVal.slice(9, 10);
  }
});
</script>

<template>
  <section class="everdayfeed">
    <Aside></Aside>
    <div class="section-content">
      <div class="topic-category">最新消息</div>
      <div class="header-with-cta">
        <h1 class="section-head" v-if="catData">{{ catData.name }}</h1>
        <div v-else>
          <el-skeleton animated :throttle="500">
            <template #template>
              <el-skeleton-item variant="h1" style="width: 150px" />
            </template>
          </el-skeleton>
        </div>
      </div>

      <Hero :data="heroData"></Hero>

      <LatestNewsThree :data="catPostData"></LatestNewsThree>
    </div>

    <div class="view-archive-wrapper">
      <a href="#" class="nr-cta-primary-light" @click="open"> 阅读历史文章 </a>
    </div>
  </section>
</template>

<style lang="less" scoped>
.topic-category {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  color: #6e6e73;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.header-with-cta {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
</style>
